<template>
	<view class="content">
		<view class="top">
			<!-- 搜索框 -->
			<uni-search-bar :radius="10" @confirm="search" placeholder="搜索" @input="input"></uni-search-bar>
			<!--  #ifdef  MP-WEIXIN -->
			<text class="iconfont">&#xe629;</text>
			<!--  #endif -->
		</view>
		<view class="funcs">
			<view class="func" @click="goNewFriends">
				<image src="../../static/image/find.png" mode=""></image>
				<text>新的朋友</text>
				<view class="dot" v-if="addfrinedSum">
					{{addfrinedSum}}
				</view>
			</view>
			<view class="func" @click="goAddFriends">
				<image src="../../static/image/find.png" mode=""></image>
				<text>附近的人</text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(friend,index) in friends" :key='index' @click="goUserDetail(friend.uuid)">
				<image :src="friend.avat" mode=""></image>
				<view class="cont">
					<text>{{friend.userName}}</text>
				</view>
			</view>
		</view>
		</view>
</template>

<script>
	import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import util from '../../utils/index.js'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				friends: []
			}
		},
		onShow() {
			let {
				uuid
			} = uni.getStorageSync('user')
			util.myRequest({
				url: '/getUserFriends',
				data: {
					uuid
				}
			}).then(res => {
				this.friends = res
				// 查询是否有人加我
				return util.myRequest({
					url:'/getAddFriend',
					data: {
						uuid
					}
				})
			}).then(res=>{
				this.$store.commit('addfrinedSum',res.length)
			})
			// 注：只有连接正常打开中 ，才能正常收到消息
			uni.onSocketMessage(res => { 
				let newMsg=JSON.parse(res.data)
				if(newMsg.type!=='addfriend'){
					this.$store.commit('unreadSumAdd')
				}else{
					this.$store.commit('addfrinedSumAdd')
				}
			});
		},
		onNavigationBarButtonTap(e) {
			if (e.text !== '&nbsp') console.log('you click!')
		},
		computed:{
			addfrinedSum(){
				return this.$store.state.addfrinedSum
			}
		},
		methods: {
			bindClick(e) {
				console.log(e)
			},
			goUserDetail(uuid) {
				uni.navigateTo({
					url: '../userDetail/userDetail?uuid='+uuid
				})
			},
			goNewFriends() {
				let {
					uuid
				} = uni.getStorageSync('user')
				uni.navigateTo({
					url: '../newFriends/newFriends?uuid=' + uuid
				})
			},
			goAddFriends() {
				uni.navigateTo({
					url: '../addFriends/addFriends'
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 94px);
		background-color: #ededed;

		.list {
			background-color: #fff;

			>.item {
				display: flex;
				height: 107upx;
				align-items: center;
				border-bottom: 1px solid #CCCCCC;
				padding-left: 30upx;
				position: relative;

				image {
					width: 72upx;
					height: 72upx;
					border-radius: 8upx;
				}

				.cont {
					display: flex;
					flex-direction: column;
					font-size: 30upx;
					margin-left: 20upx;


				}


				&:nth-last-child(1) {
					border: none;
				}
			}
		}

		>.list {
			flex-grow: 1;
			position: relative;
		}

		>.funcs {
			margin: 18upx 0;
			background-color: #fff;

			>.func {
				display: flex;
				height: 100upx;
				padding-left: 26upx;
				align-items: center;
				border-bottom: 1px solid #CCCCCC;
				position: relative;

				&:nth-last-child(1) {
					border: none;
				}

				>image {
					width: 72upx;
					height: 72upx;
					border-radius: 5upx;
				}

				>text {
					font-size: 30upx;
					margin-left: 22upx;
				}
				>.dot{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 20upx;
					border-radius: 50%;
					background-color: #fa5150;
					color: #fff;
					font-size: 17upx;
					text-align: center;
					width: 32upx;
					line-height: 32upx;
					position: absolute;
					
				}
			}
		}

		>.top {
			display: flex;
			align-items: center;
			background-color: #fff;

			uni-search-bar,
			.uni-searchbar {
				flex: 1;
			}

			>text {
				font-size: 53upx;
				margin-right: 20upx;
			}
		}
	}
</style>
